<template>
  <l-panel style="padding: 0px">
    <template #toolLeft>
      <l-query2
        :items="queryItems"
        :formData="queryData"
        :loading="tableLoading"
        @search="handleSearch"
      >
        <template #f_Theme>
          <el-input v-model="queryData.f_Theme" :placeholder="$t('请输入')" />
        </template>
        <template #f_DateQRange>
          <l-date
            format="yyyy-MM-dd"
            dateType="daterange"
            v-model="queryData.f_DateQRange"
            :placeholder="$t('请选择')"
          />
        </template>
        <template #f_Store>
          <l-select
            :options="storeOptions"
            v-model="queryData.f_Store"
            :placeholder="$t('请选择')"
          />
        </template>
      </l-query2>
    </template>

    <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="columns"
      :dataSource="tableData"
      :isPage="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      @loadPageData="turnTablePage"
    >
    </l-table>
  </l-panel>
</template>
<script>
const api = window.$api.erpcase.outstorelog;
export default {
  props: {
    materialId: String,
  },
  data() {
    return {
      // 查询参数
      queryData: {
        f_Theme: "",
        f_DateQRange: "",
        f_Store: "",
      },
      queryItems: [
        { label: "主题", prop: "f_Theme" },
        { label: "仓库", prop: "f_Store" },
        { label: "日期", prop: "f_DateQRange" },
      ],

      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "出库单号", prop: "f_Number", minWidth: 120, align: "left" },
        {
          label: "出库主题",
          prop: "f_Theme",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "出库日期",
          prop: "f_Date",
          width: 120,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        { label: "数量", prop: "f_Count", width: 100, align: "left" },
        {
          label: "出库人员",
          prop: "f_Person",
          width: 120,
          align: "left",
          dataType: "user",
        },
        {
          label: "出库仓库",
          prop: "f_Store",
          width: 120,
          align: "left",
          dataType: "dataSource",
          dataCode: "ERP_WareHouses",
          valueKey: "f_id",
          labelKey: "f_name",
          isNotAutoWrap: true,
        },
      ],
    };
  },
  computed: {
    storeOptions() {
      const data = this.lr_DataSource("ERP_WareHouses");
      return this.lr_DataSourceOptions(data, "f_id", "f_name");
    },
  },
  watch: {
    materialId: {
      handler() {
        this.init();
      },
      immediate: true,
    },
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },

    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.f_MaterialId = this.materialId;
      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "f_Date DESC";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
  },
};
</script>